<!doctype html>
<html>
	<head>
		<title>List tests</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../../test.js"></script>

		<style>
            li {
                margin: 10px 5%;
            }
			.list1 {
				list-style-type: circle;
			}

			.list2 {
				list-style-image: url(../../assets/image.jpg);
			}

			.list3 {
				list-style-image: linear-gradient(60deg, deeppink, aquamarine);
				list-style-position: inside;
			}

			.list4 {
			}

			.list5 {
				list-style-type: lower-roman;
			}

			.list6 {
				list-style-type: hiragana;
			}

			.list7 {
				list-style-type: simp-chinese-informal;
			}

            .list8 {
                list-style-type: lower-roman;
            }

            .list8 li {
                display: block;
            }

            .list9 {
                display: list-item;
                list-style-type: lower-alpha;
                margin: 10px;
                position: relative;
                left: 200px;
            }
		</style>
	</head>
	<body>
		<ul class="list1">
			<li>Alpha</li>
			<li>Beta</li>
			<li>Gamma</li>
		</ul>
		<ul class="list2">
			<li>Alpha</li>
			<li>Beta</li>
			<li>Gamma</li>
		</ul>
		<ul class="list3">
			<li>Alpha</li>
			<li>Beta</li>
			<li>Gamma</li>
		</ul>
		<ol class="list4" start="-1">
			<li>Alpha</li>
			<li>Beta</li>
			<li>Gamma</li>
		</ol>
		<ol class="list5">
			<li>Alpha</li>
			<li value="5">Beta</li>
			<li>Gamma</li>
		</ol>
		<ol class="list6">
			<li>Alpha</li>
			<li>Beta</li>
			<li>Gamma</li>
		</ol>
		<ol class="list7">
			<li>Alpha</li>
			<li>Beta</li>
			<li>Gamma</li>
		</ol>
        <ol class="list8">
            <li>Alpha</li>
            <li>Beta</li>
            <li>Gamma</li>
        </ol>
        <div class="list9">Alpha</div>
        <div class="list9">Beta</div>
        <div class="list9">Gamma</div>
	</body>
</html>
